import React from 'react'
import PropTypes from 'prop-types'
import {
  ScrollView,
  StyleSheet,
  Text,
  FlatList,
  View
} from 'react-native'
import CustomButton from 'src/components/button/CustomButton'
import { ScaleS, ScaleT, IS_IPHONEX } from 'src/utils/ScreenUtil'
import JobIntentionCardNew from 'src/components/card-job-intention-new'
import EducationInfoCardNew from 'src/components/card-education-info-new'
import WorkExperienceCardNew from 'src/components/card-work-experience-new'
import { CommonToast } from '@utils/ToastUtil'
import { ImageHost } from 'src/config/index'
import CustomImage from 'src/components/image/CustomImage'

export default class DealJobHuntingModal extends React.Component {
  static defaultProps = {}

  static propTypes = {
    dataArr: PropTypes.array,
    modalDealState: PropTypes.string,
    modelActiveIndex: PropTypes.number,
    onClickModelItem: PropTypes.func,
    onClickModelBtn: PropTypes.func,
    dataStatus: PropTypes.string
  }

  constructor (props) {
    super(props)
    let title = ''
    switch (props.dataStatus) {
      case 'education':
        title = '教育信息'
        break
      case 'jobHunting':
        title = '求职意向'
        break
      case 'work':
        title = '工作经验'
        break
      case 'photo':
        title = '照片'
        break
      default:
        title = '求职意向'
        break
    }
    this.state = {
      activeIndex: props.modelActiveIndex,
      dealState: props.modalDealState,
      title,
      dataPhotoArr: this._transformDataArr(),
      checkedIds: []
    }
  }

  render () {
    const { dealState, title } = this.state
    return (
      <View style={styles.view}>
        <Text style={styles.modalTitle}>{`请选择你要${dealState === 'edit' ? '修改' : '删除'}的${title}：`}</Text>
        <ScrollView style={styles.scrollView}>
          {this._dataMapView()}
        </ScrollView>
        <CustomButton style={styles.bottomBtn} onPress={this._onClickModelBtn}>
          <Text style={styles.bottomBtnText}>{dealState === 'edit' ? '修改' : '删除'}</Text>
        </CustomButton>
      </View>
    )
  }

  _dataMapView = () => {
    const { dataStatus, dataArr } = this.props
    const { activeIndex, dataPhotoArr, checkedIds } = this.state
    switch (dataStatus) {
      case 'jobHunting':
        return (dataArr && dataArr.length > 0 && dataArr.map((item, index) => {
          return (<CustomButton
            key={item.id}
            params={{ item, index }}
            style={[styles.modalSelectItem, index === activeIndex && styles.modalSelectItemActive]}
            onPress={this._onClickModelItem}
          >
            <JobIntentionCardNew dataSource={item}/>
          </CustomButton>)
        }))
      case 'education':
        return (
          dataArr.map((item, index) => {
            return (<CustomButton
              key={item.id}
              params={{ item, index }}
              style={[styles.modalSelectItem, index === activeIndex && styles.modalSelectItemActive]}
              onPress={this._onClickModelItem}
            >
              <EducationInfoCardNew
                key={item.id}
                dataSource={item}/>
            </CustomButton>)
          })
        )
      case 'work':
        return (
          dataArr.map((item, index) => {
            return (<CustomButton
              key={item.id}
              params={{ item, index }}
              style={[styles.modalSelectItem, index === activeIndex && styles.modalSelectItemActive]}
              onPress={this._onClickModelItem}
            >
              <WorkExperienceCardNew
                key={item.id}
                type={'textEllipsize'}
                dataSource={item}/>
            </CustomButton>)
          })
        )
      case 'photo':
        return (
          <FlatList
            style={styles.photoAlbumScrollView}
            extraData={checkedIds}
            data={dataPhotoArr}
            horizontal={false}
            numColumns={3}
            renderItem={this._renderItem}
            keyExtractor={this._keyExtractor}/>
        )
    }
  }

  _onClickModelItem = ({ item, index }) => {
    const { dataStatus } = this.props
    const { checkedIds } = this.state
    if (dataStatus === 'photo') {
      let newCheckedIds
      if (checkedIds.includes(item.id)) {
        newCheckedIds = checkedIds.filter(checkId => item.id !== checkId)
      } else {
        newCheckedIds = checkedIds.concat(item.id)
      }
      this.setState({
        checkedIds: newCheckedIds
      })
      this.props.onClickModelItem(newCheckedIds)
    } else {
      this.setState({
        activeIndex: index
      })
      this.props.onClickModelItem(index)
    }
  }

  _onClickModelBtn = () => {
    const { dataArr } = this.props
    const { dealState } = this.state
    if ((!!dataArr && dataArr.length > 1) || dealState === 'edit') {
      this.props.onClickModelBtn()
    } else {
      CommonToast('无法删除最后一条')
    }
  }

  _transformDataArr = () => {
    const { dataArr } = this.props
    const returnData = dataArr.map((item) => {
      item.url = ImageHost + item.imgUrl
      return item
    })
    return returnData
  }

  _renderItem = ({ item, index }) => {
    const { checkedIds } = this.state
    return (
      <CustomButton params={{ item, index }} onPress={this._onClickModelItem}>
        <CustomImage
          style={[styles.photoImg, { marginRight: index % 3 === 2 ? 0 : ScaleS(4) }]}
          source={{ uri: item.url }}/>
        {
          checkedIds.includes(item.id) ? (
            <View style={styles.itemCloseView}>
              <CustomImage style={styles.itemCloseImg} source={require('@/imgC/userinfo/icon_white_ok.png')}/>
            </View>
          ) : null
        }
      </CustomButton>
    )
  }

  _keyExtractor = item => item.id
}

const styles = StyleSheet.create({
  view: {
    width: '100%',
    maxHeight: ScaleS(500),
    borderTopLeftRadius: ScaleS(12),
    borderTopRightRadius: ScaleS(12),
    backgroundColor: '#fff',
    paddingBottom: IS_IPHONEX ? ScaleS(40) : ScaleS(10),
    paddingTop: ScaleS(30),
    justifyContent: 'center'
  },
  scrollView: {
    // flex: 1,
    paddingHorizontal: ScaleS(30),
    marginBottom: ScaleS(20)
  },
  modalTitle: {
    fontSize: ScaleT(14),
    color: '#666666',
    marginBottom: ScaleS(30),
    paddingHorizontal: ScaleS(30)
  },
  modalSelectItem: {
    width: '100%',
    backgroundColor: 'rgba(235, 235, 235, 0.5)',
    borderRadius: ScaleS(5),
    paddingHorizontal: ScaleS(25),
    paddingVertical: ScaleS(25),
    marginBottom: ScaleS(20)
  },
  modalSelectItemActive: {
    backgroundColor: '#FFE400'
  },
  bottomBtn: {
    width: ScaleS(315),
    borderColor: '#3C3C3C',
    borderStyle: 'solid',
    borderWidth: ScaleS(1),
    borderRadius: ScaleS(5),
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: ScaleS(16),
    marginHorizontal: ScaleS(30)
  },
  bottomBtnText: {
    fontSize: ScaleT(16),
    fontWeight: '500',
    color: '#3C3C3C'
  },
  photoAlbumScrollView: {
    flex: 1,
    marginBottom: ScaleS(20)
  },
  photoImg: {
    width: ScaleS(102),
    height: ScaleS(102),
    resizeMode: 'cover',
    marginBottom: ScaleS(4)
  },
  itemCloseView: {
    width: ScaleS(102),
    height: ScaleS(102),
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    left: 0
  },
  itemCloseImg: {
    width: ScaleS(21),
    height: ScaleS(15)
  }
})
